<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Air Share!</title>
    <!-- zui -->
    <link rel="stylesheet" href="../css/zui.css">
    <link href="../lib/datagrid/zui.datagrid.min.css" rel="stylesheet">

    <link href="../lib/datatable/zui.datatable.css" rel="stylesheet">
    <script src="../lib/datatable/zui.datatable.js"></script>

    <style>
        footer {
            position: absolute;
            bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */
            /*border: 1px red solid;*/
            clear: both;
            display: block;
            text-align: center;
            width: 100%;
            padding: 20px;
        }
    </style>
</head>


<body>
<div id="app">

    <div class="container">
        <ul class="nav nav-primary" style="margin-top: 20px">
            <li><a href="index">首页</a></li>
            <li class="active"><a href="files">文件</a></li>
            <li class="pull-right" id="authSection">
                <!-- Auth section will be populated by JavaScript -->
            </li>
        </ul>
        
        <div id="loginRequired" style="display: none;">
            <div class="alert alert-warning">
                <h4>Login Required for File Management</h4>
                <p>Please <a href="/login">login</a> to delete files. <a href="/register">Register</a> if you don't have an account.</p>
            </div>
        </div>
        
        <h3>请及时删除你的文件，文件会不定期清理，如果需要保留时长，联系管理员</h3>

        <table class="datagrid table datatable">
            <thead>
            <tr>
                <th>filename</th>
                <th>size</th>
                <th>time</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="fileEntity:${fileList}">
                <td><a th:href="@{'/file/download?fileUuid='+${fileEntity.fileUuid}}" target="_blank"
                       th:text="${fileEntity.fileName}"></a></td>
                <div th:if="${fileEntity.fileSize}>1073741824">
                    <td th:text="${#numbers.formatDecimal(fileEntity.fileSize/1073741824,1,'COMMA',0,'POINT')}+GB"
                        style="padding: 7px"></td>
                </div>
                <div th:if="${fileEntity.fileSize}>1048576 and ${fileEntity.fileSize}<=1073741824">
                    <td th:text="${#numbers.formatDecimal(fileEntity.fileSize/1048576,1,'COMMA',0,'POINT')}+MB"></td>
                </div>
                <div th:if="${fileEntity.fileSize}<=1048576">
                    <td th:text="${#numbers.formatDecimal(fileEntity.fileSize/1024,1,'COMMA',0,'POINT')}+KB"></td>
                </div>

                <td th:text="${#dates.format(fileEntity.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                <td>

                    <a class="btn btn-sm btn-danger delete-btn" th:href="@{/file/del(fileUuid=${fileEntity.id})}" style="display: none;"> 删除 </a>
                    <span class="login-required-msg" style="color: #999; font-style: italic;">Login required to delete</span>

                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <footer id="footer"><a href="https://beian.miit.gov.cn/">京ICP备18028985号-2</a></footer>

</div>
</div>
<!--<script src="https://unpkg.com/vue@next"></script>-->
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="../lib/jquery/jquery-3.4.1.min.js"></script>
<!--<script src="../js/axios.min.js"></script>-->
<script src="../lib/datagrid/zui.datagrid.min.js"></script>
<!-- ZUI Javascript组件 -->
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="../js/zui.js"></script>
<script>
    $(document).ready(function() {
        checkAuthStatus();
    });

    /* 初始化数据表格 */
    $('table.datatable').datatable();
    
    // Authentication management
    function checkAuthStatus() {
        var token = localStorage.getItem('authToken');
        var username = localStorage.getItem('username');
        
        if (token && username) {
            // User is logged in
            $('#authSection').html(
                '<li class="dropdown">' +
                '<a href="#" class="dropdown-toggle" data-toggle="dropdown">' +
                'Welcome, ' + username + ' <b class="caret"></b>' +
                '</a>' +
                '<ul class="dropdown-menu">' +
                '<li><a href="#" onclick="logout()">Logout</a></li>' +
                '</ul>' +
                '</li>'
            );
            $('#loginRequired').hide();
            $('.delete-btn').show();
            $('.login-required-msg').hide();
        } else {
            // User is not logged in
            $('#authSection').html(
                '<li><a href="/login">Login</a></li>' +
                '<li><a href="/register">Register</a></li>'
            );
            $('#loginRequired').show();
            $('.delete-btn').hide();
            $('.login-required-msg').show();
        }
    }
    
    function logout() {
        // Call API logout first
        $.ajax({
            url: '/auth/logout',
            type: 'POST',
            success: function(response) {
                if (response.code === 200) {
                    // Clear client-side data after successful server logout
                    localStorage.removeItem('authToken');
                    localStorage.removeItem('username');
                    localStorage.removeItem('email');
                    localStorage.removeItem('userId');
                    // clear AUTH_TOKEN cookie
                    document.cookie = 'AUTH_TOKEN=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
                    checkAuthStatus();
                    console.log('Logout successful');
                } else {
                    alert('Logout failed: ' + response.msg);
                }
            },
            error: function(xhr, status, error) {
                console.error('Logout error:', error);
                alert('Logout failed');
            }
        });
    }
</script>


</body>
</html>
